<template>
    <div class="remt">
        <div class="layout">
            <div><h2>简历管理</h2></div>
            <div class="table">
                <div>
                    <div><h3>个人简历管理</h3></div>
                      <div>

    <!-- 卡片视图区域 -->
    <el-card style="margin-top: 20px">
        <el-row :gutter="20">
          <!-- 搜索框 -->
          <el-col :span="8">
            <el-input
              placeholder="请输入账号进行搜索"
              v-model="input"
              clearable
              size="medium"
            >
              <el-button
                type="primary"
                slot="append"
                icon="el-icon-search"
                @click="search()"
              ></el-button>
            </el-input>
          </el-col>
        
        </el-row>

        <!-- 用户列表区域 -->
        <el-table :data="tableData" stripe style="width: 100%" border >
          <el-table-column type="index"  label="序号">
          </el-table-column>
          <el-table-column prop="zh" label="账号">
          </el-table-column>
          <el-table-column prop="xm" label="姓名">
          </el-table-column>
          <el-table-column prop="sfzh" label="身份证号">
          </el-table-column>
          <el-table-column prop="csny" label="出生年月">
          </el-table-column>
          <el-table-column prop="xl" label="学历">
          </el-table-column>
          <el-table-column prop="zy" label="专业">
          </el-table-column>
          <el-table-column prop="byxx" label="毕业学校">
          </el-table-column>
          <el-table-column prop="gznx" label="工作年限">
          </el-table-column>
          <el-table-column prop="szcs" label="所在城市">
          </el-table-column>
          <el-table-column label="操作" width='300px'>
            <template slot-scope="scope">
              
              <!-- 删除 -->
              <el-button
                type="danger"
                @click="removes(scope.row)"
                size="mini"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
     
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[6, 10, 15]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="6"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      searchs: [],
      input: null,
      // 查找列表
      searchtableData: [
       {
xh: ' 1 ',
zh: ' 1234561 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 2 ',
zh: ' 1234562 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 3 ',
zh: ' 1234563 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 4 ',
zh: ' 1234564 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 5 ',
zh: ' 1234565 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},

      ],
      // 显示列表
      tableData: [
       {
xh: ' 1 ',
zh: ' 1234561 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 2 ',
zh: ' 1234562 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 3 ',
zh: ' 1234563 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 4 ',
zh: ' 1234564 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},
{
xh: ' 5 ',
zh: ' 1234565 ',
xm: ' 谢广坤 ',
sfzh: ' 123456789 ',
csny: ' 1991/8/8 ',
xl: ' 本科 ',
zy: ' 软件 ',
byxx: ' 加里顿大学 ',
gznx: ' 3年 ',
szcs: ' 象牙村 ',
},

      ],
      el_show: false,

      el_xiu: false,
      time: '',
      tell: '',
      name: '',
      number: '',
      role: '',
      position: '',
      department: '',
      newtable: {
        time: '',
        tell: '',
        number: '',
        name: '',
        role: '',
        position: '',
        department: '',
      },
      formLabelWidth: '120px',
      newid: 0,

      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 查找
    search: function () {
      console.log(this.input)
      this.tableData.map((item) => {
        if (this.input == null || this.input == '') {
          this.tableData = this.searchtableData
          return
        } else if (item.zh.includes(this.input)) {
          this.searchs = []
          this.searchs.push(item)
          console.log(this.searchs)
          this.tableData = this.searchs
          console.log(this.tableData)
          return
        }
      })
    },

    // 删除
    removes: function (v) {
      console.log(v.id)
      this.newid = this.tableData.findIndex((item) => {
        return item.id == v.id
      })
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.tableData.splice(this.newid, 1)
          this.searchtableData = this.tableData
          console.log(this.tableData)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },


    trueset: function () {
      console.log(this.newtable.time + '===')
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == this.newtable.id) {
          this.tableData[i].time = this.newtable.time
          this.tableData[i].tell = this.newtable.tell
          this.tableData[i].number = this.newtable.number
          this.tableData[i].name = this.newtable.name
          this.tableData[i].role = this.newtable.role
          this.tableData[i].position = this.newtable.position
          this.tableData[i].department = this.newtable.department
          this.tableData[i].id = this.newtable.id
          this.el_xiu = false
        }
      }
      this.searchtableData = this.tableData
    },
  },
}
</script>

<style scoped>
    h2,h3{
        width: 150px;
        margin: 20px auto;
    }
    .remt{
        width: 100%;
        height: 100%;
    }
    .layout{
        width: 100%;
        height: 100%;
    }
    .table{
        width: calc(100% - 100px);
        margin: 0 50px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid #000;
        background-color: #EFEFEF;
    }
    .one{
        width: calc(100% - 40px);
        height: 50px;
        display: flex;
        margin: 20px;
        align-items: center;
    }
    .one input{
        margin: 0 20px;
    }
    .two{
        width: 100%;
    }
</style>